<template>
    <div class="mainDiv">
        <div class="rowHead">
            <el-date-picker class="w300" v-model="times" type="daterange" align="right" placeholder="请选择日期范围" :picker-options="pickerOptions2" @change="reupdate" v-qx="permission.date">
            </el-date-picker>
            <el-button type="primary" @click="openRizhi">日志报表</el-button>
        </div>
        <el-tabs v-model="posName" @tab-click="handleClick">
            <el-tab-pane label="本期收入" name="1">
                <el-table :data="list1" :stripe="true" show-summary :summary-method="getSummaries">
                    <el-table-column prop="accountid" label="#"></el-table-column>
                    <el-table-column prop="name" label="账户名称"></el-table-column>
                    <el-table-column prop="accounttype" label="账户类型">
                        <template slot-scope="scope">
                            <Tags :typeValue="scope.row.accounttype" typeName="accountType"></Tags>
                        </template>
                    </el-table-column>
                    <el-table-column prop="summoney" label="收款金额">
                        <template slot-scope="scope">{{scope.row.summoney}}元</template>
                    </el-table-column>
                    <el-table-column label="详情">
                        <template slot-scope="scope">
                            <el-button type="primary" icon="el-icon-h-chakan" size="mini" @click="look(scope.row)" v-qx="permission.info"></el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="本期支出" name="2">
                <el-table :data="list2" :stripe="true" show-summary :summary-method="getSummaries">
                    <el-table-column prop="accountid" label="#"></el-table-column>
                    <el-table-column prop="name" label="账户名称"></el-table-column>
                    <el-table-column prop="accounttype" label="账户类型">
                        <template slot-scope="scope">
                            <Tags :typeValue="scope.row.accounttype" typeName="accountType"></Tags>
                        </template>
                    </el-table-column>
                    <el-table-column prop="summoney" label="支出金额">
                        <template slot-scope="scope">{{scope.row.summoney}}元</template>
                    </el-table-column>
                    <el-table-column label="详情">
                        <template slot-scope="scope">
                            <el-button type="primary" icon="el-icon-h-chakan" size="mini" @click="look(scope.row)" v-qx="permission.info"></el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="本期收益" name="3">
                <el-table :data="list3" :stripe="true" show-summary :summary-method="getSummaries">
                    <el-table-column prop="accountid" label="#"></el-table-column>
                    <el-table-column prop="name" label="账户名称"></el-table-column>
                    <el-table-column prop="accounttype" label="账户类型">
                        <template slot-scope="scope">
                            <Tags :typeValue="scope.row.accounttype" typeName="accountType"></Tags>
                        </template>
                    </el-table-column>
                    <el-table-column prop="summoney" label="收益金额">
                        <template slot-scope="scope">{{scope.row.summoney}}元</template>
                    </el-table-column>
                    <el-table-column label="详情">
                        <template slot-scope="scope">
                            <el-button type="primary" icon="el-icon-h-chakan" size="mini" @click="look(scope.row)" v-qx="permission.info"></el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
import C from '@/common/common.js'
import Settlement from '@/service/shop/settlement.js'
import Tags from '@/components/orderTags.vue'

export default {
  name: 'moneyList',
  data () {
    return {
      list1: [],
      list2: [],
      list3: [],
      posName: '1',
      aaamoney: '0',
      permission: {
        date: 'moneyinfo_date',
        info: 'moneyinfo_info'
      },
      currt: '',
      times: [new Date(), new Date()],
      pickerOptions2: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const td = new Date()
            td.setHours(0)
            td.setMinutes(0)
            td.setSeconds(0)
            td.setMilliseconds(0)
            const start = new Date()
            start.setTime(td.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, td])
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const td = new Date()
            td.setHours(0)
            td.setMinutes(0)
            td.setSeconds(0)
            td.setMilliseconds(0)
            const start = new Date()
            start.setTime(td.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, td])
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const td = new Date()
            td.setHours(0)
            td.setMinutes(0)
            td.setSeconds(0)
            td.setMilliseconds(0)
            const start = new Date()
            start.setTime(td.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, td])
          }
        }]
      }
    }
  },
  methods: {
    // 计算合计行
    getSummaries: function (param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '总金额'
          return
        }
        const values = data.map(item => Number(item[column.property]))
        if (!values.every(value => isNaN(value))) {
          sums[3] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
          sums[3] += ' 元'
        } else {
          sums[index] = ''
        }
      })

      return sums
    },
    handleClick: function (tab, event) {
      this.posName = tab.name
      this.reupdate()
    },
    look: async function (row) {
      if (!this.times) {
        let tm = new Date().setHours(0, 0, 0).valueOf()
        this.times = [tm, tm + 86400]
      } else {
        if (typeof this.times[0] === 'number') {
          await C.openBrowserWindow('/moneyInfo', { id: row.accountid, times: this.times, tp: this.posName }, { width: 1400, height: 800, useSpa: false, spaModel: 'shop', transparent: true, frame: false })
          return false
        }
        let aaa = this.times[0].getHours()
        let bbb = this.times[0].getMinutes()
        let ccc = this.times[0].getSeconds()
        let ddd = this.times[0].getMilliseconds()
        if (aaa == bbb == ccc == ddd) {
          this.times = [
            Math.round(new Date(this.times[0]).setHours(0, 0, 0).valueOf()),
            Math.round(new Date(this.times[1]).setHours(0, 0, 0).valueOf())
          ]
        } else {
          this.times = [
            Math.round(new Date(this.times[0]).setHours(0, 0, 0).valueOf()),
            Math.round(new Date(this.times[0]).setHours(0, 0, 0).valueOf()) + 86400000
          ]
        }
      }
      await C.openBrowserWindow('/moneyInfo', { id: row.accountid, times: this.times, tp: this.posName }, { width: 1400, height: 800, useSpa: false, spaModel: 'shop', transparent: true, frame: false })
    },

    sizeChange: function (val) {
      this.page.limits = val
      this.reupdate()
    },

    currentChange: function (val) {
      this.page.pages = val
      this.expands = []
      this.reupdate()
    },

    reupdate: async function () {
      var that = this
      if (!this.times) {
        this.times = [new Date(), new Date()]
      }
      let res = await C.ajax('/shop/money/xianjinlog', { times: JSON.stringify(that.times), lx: that.posName }, 'post')
      if (res) {
        if (this.posName == 1) this.list1 = res
        else if (this.posName == 2) this.list2 = res
        else if (this.posName == 3) this.list3 = res
        var aaa = []
        for (var i = 0; i < res.length; i++) {
          aaa.push(res[i].summoney)
        }
        var bbb = 0
        aaa.forEach((row) => {
          bbb += row
        })
        that.aaamoney = bbb
      }
    },

    async openRizhi () {
      await Settlement.openSettlement()
    }

  },
  mounted: function () {
    this.reupdate()
  },
  components: { Tags }
}
</script>